<template>
    <div>
        <Back class="fanhui" @click="this.$router.push({ name: 'home'})"/>
        <div class="user">
            <div class="user-header">
                <div class="user-title">
                    <i class="el-icon-s-custom" style="color: #ff6700"></i>
                    用户中心
                </div>
            </div>
        </div>

        <ul class="user-content">
            <li>
                <span>用户名:</span>
                <el-input type="text" v-model="userInfo.username" disabled></el-input>
            </li>
            <li>
                <span>手机号:</span>
                <el-input type="text" v-model="userInfo.phone"></el-input>
            </li>

            <!-- 展示收货地址 -->
            <li v-for="(item, index) in userInfo.addrs" :key="item.id">
                <span>地址{{ index + 1 }}:</span>&nbsp;
                <!-- 删除按钮 -->
                <el-popover placement="right">
                    <p>确定删除吗？</p>
                    <div style="text-align: right; margin: 10px 0 0">
                        <el-button type="primary" size="mini" @click="deleteAddr($event, item.id)">确定</el-button>
                    </div>
                    <i class="el-icon-error" slot="reference" style="font-size: 18px"></i>
                </el-popover>
                <!-- 地址数据 -->
                <el-input type="text" v-model="item.recipients"></el-input>
                <el-input type="text" v-model="item.recipients_mobile"></el-input>
                <el-input type="text" v-model="item.recipients_addr"></el-input>
            </li>

            <li ref="controls">
                <el-button type="primary" plain @click="updateUserInfo">修改信息</el-button>
                <el-button type="primary" round @click="updatePassword">修改密码</el-button>
                <!-- 更新密码组件，控制显示隐藏 -->


                <!-- 添加收货地址 -->
                <span>添加收货地址：</span>
                <el-input placeholder="收货人" v-model="receiver"></el-input>
                <el-input placeholder="手机号" v-model="receive_mobile"></el-input>
                <el-input placeholder="添加地址" v-model="receive_addr"></el-input>
                <el-checkbox v-model="is_default">是否默认</el-checkbox>
                <el-button class="addAddr" type="primary" round @click="addAddr">添加地址</el-button>
            </li>
            <li style="{display:block, margin:20px,}" class="bottom-line"></li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: "User",

    data() {
        return {
            host: 'http://127.0.0.1:8000/',
            userInfo: {
                username: "",
                phone: "",
                addrs: [
                    //   { id: 1, receiver:"", receive_mobile:"", receive_addr: "北京", is_default:true},
                    //   { id: 2, receiver:"", receive_mobile:"", receive_addr: "上海", is_default:false},
                ],
            },
            receiver: "",//收货人
            receive_mobile: "", //收货手机号
            receive_addr: "", //收货地址
            is_default: false, //是否为默认地址
        };
    },
    props: {},


    mounted() {
        // 已登录，发送ajax请求，获取用户信息
        axios.get(this.host + "users/user/", {
            headers: { token: localStorage.getItem("token") || "" }
        })
            .then((res) => {
                console.log("@@获取用户的信息：", res);
                if (res.data.code == 200) {
                    this.userInfo = res.data.userInfo;
                } else {
                    this.notifyError(res.data.msg);
                }
            })
            .catch((err) => {
                return Promise.reject(err);
            });
    },


    methods: {
        // 修改个人信息
        updateUserInfo() {
            console.log("修改个人信息...");
            axios.put(this.host + "users/user/", {
                phone: this.userInfo.phone,
                addrs: this.userInfo.addrs,
            }, { headers: { token: localStorage.getItem("token") || "" } }
            )
                .then(res => {
                    if (res.data.code == 200) {
                        alert('修改成功')
                    }

                })
        },

        // 更改个人密码
        updatePassword() {
            console.log("修改个人密码...");
            this.$store.dispatch("setUpdatePw", true);
        },

        // 删除该地址
        deleteAddr(e, addr_id) {
            axios.delete(this.host + "users/user/addr/", {
                data: { addr_id: addr_id }
            }).then(res => {
                if (res.data.code == 200) {
                    // 删除vuex中的对应地址
                    for (let i = 0; i < this.userInfo.addrs.length; i++) {
                        let temp = this.userInfo.addrs[i]
                        if (temp.id == addr_id) {
                            this.userInfo.addrs.splice(i, 1)
                        }
                    }
                    this.notifySucceed(res.data.msg)
                } else {
                    this.notifyError
                }
            })
        },

        // 添加地址
        addAddr() {
            console.log("增加地址...");
            axios.post(this.host + "users/user/addr/", {
                receiver: this.receiver,
                receive_mobile: this.receive_mobile,
                receive_addr: this.receive_addr, //字符串地址
                is_default: this.is_default, //是否默认地址
            }, { headers: { token: localStorage.getItem("token") || "" } })

                .then((res) => {
                    console.log("添加地址的响应:", res);
                    if (res.data.code == 200) {
                        this.userInfo.addrs.push(res.data.addr);
                        this.receiver = ""
                        this.receive_mobile = ""
                        this.receive_addr = ""
                    } 
                    
                })
                .catch((err) => {
                    return Promise.reject(err);
                });
        },
    },
};
</script>

<style scoped>
.fanhui{
    float: left;
    width: 30px;
    height: 30px;
}
* {
    margin: 0;
}

.user {
    background-color: #f5f5f5;
}

.user .user-header {
    height: 64px;
    background-color: #fff;
    border-bottom: 2px solid #ff6700;
}

.user .user-header .user-title {
    width: 1225px;
    margin: 0 auto;
    height: 64px;
    line-height: 58px;
    font-size: 28px;
}

.userCenter {
    width: 1225px;
    margin: 0 auto;
    padding: 48px 0 0;
    background-color: #fff;
}

.user-content {
    width: 800px;
    margin: 0 auto;
    height: 600px;
    line-height: 58px;
    font-size: 16px;
}

.user-content .bottom-line {
    height: 64px;
    background-color: #fff;
    /* border-bottom: 2px solid #ff6700; */
}

.addAddr {
    margin-left: 3.4%;
}
</style>
